<template>
  <el-form :model="formState" :rules="formRules" ref="formRef">
    <div class="flex gap-2 items-stretch">
      <div class="flex-1 flex items-stretch gap-2">
        <div class="flex-1 flex flex-col">
          <div class="text-center p-2 bg-white/20 rounded-t flex-none">企业名称</div>
          <div class="flex-auto">
            <el-form-item label="" prop="companyNames" class="h-full">
              <el-input
                v-model="formState.companyNames"
                type="textarea"
                placeholder="提示：多条数据请换行，一行默认为一同一条数据"
                input-style="border-radius: 0 0 4px 4px;"
                :disabled="readonly"
              />
            </el-form-item>
          </div>
        </div>
        <div class="flex-1 flex flex-col">
          <div class="text-center p-2 bg-white/20 rounded-t flex-none">信用代码</div>
          <div class="flex-auto">
            <el-form-item label="" prop="creditNos" class="h-full">
              <el-input
                v-model="formState.creditNos"
                style="width: 100%; height: 100%"
                :rows="20"
                type="textarea"
                placeholder="提示：多条数据请换行，一行默认为一同一条数据"
                input-style="border-radius: 0 0 4px 4px;"
                :disabled="readonly"
              />
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="flex-none self-center">
        <el-button type="primary" :disabled="readonly" @click="handleMatch()">匹配企业</el-button>
      </div>
      <div class="flex-1">
        <div class="text-center p-2 bg-white/20 rounded-t">匹配情况</div>
        <el-table :data="data" border max-height="420">
          <el-table-column property="name" label="企业名称" align="center" />
          <el-table-column property="name" label="信用代码" align="center" />
          <el-table-column property="name" label="未匹配原因" align="center" />
        </el-table>
        <div class="text-center p-2 bg-white/20 rounded-b">
          <el-link type="primary" :disabled="readonly" @click="handleDownload()"
            >下载未匹配企业</el-link
          >
        </div>
      </div>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { FormInstance } from 'element-plus'
import { ref, reactive } from 'vue'

defineProps({
  readonly: {
    type: Boolean,
    default: false
  }
})

const suitCompanyIds = defineModel('suitCompanyIds')
const formRef = ref<FormInstance>()
const formState = reactive({
  companyNames: '',
  creditNos: ''
})

const companyNamesValidator = (_rule, value, callback) => {
  // 必填校验
  if (!value && !formState.creditNos) {
    return callback(new Error('请输入企业名单'))
  }
  formRef.value?.clearValidate(['creditNos'])
  callback()
}

const creditNosValidator = (_rule, value, callback) => {
  // 必填校验
  if (!value && !formState.companyNames) {
    return callback(new Error('请输入企业名单'))
  }
  formRef.value?.clearValidate(['companyNames'])
  callback()
}

const formRules = reactive({
  companyNames: [{ required: companyNamesValidator, trigger: 'change' }],
  creditNos: [{ validator: creditNosValidator, trigger: 'change' }]
})

const data = reactive([
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  },
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District'
  }
])

const handleMatch = () => {
  formRef.value?.validate(() => {})
  suitCompanyIds.value = []
}

const handleDownload = () => {}

defineExpose({
  form: formRef,
  state: formState
})
</script>

<style>
.evaluation-system-company .el-textarea {
  height: 100% !important;
}

.evaluation-system-company .el-textarea .el-textarea__inner {
  height: 100%;
}

.evaluation-system-company .items-first-baseline {
  align-items: first baseline;
}
</style>
